<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <title>v-on</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 为按钮绑定点击事件，点击时调用 onclick 方法 -->
        <button v-on:click="onclick">点击事件</button>
        <!-- 为按钮绑定鼠标经过事件，鼠标经过时调用 onMouseover 方法 -->
        <button v-on:mouseover="onMouseover">鼠标经过事件</button>
        <!-- 为按钮同时绑定鼠标进入和离开事件，分别调用 onEnter 和 onOut 方法 -->
        <button v-on="{mouseenter:onEnter,mouseleave:onOut}">鼠标进入/离开事件</button>
        <!-- 为表单绑定键盘按键松开事件（按下回车键时）和提交事件 -->
        <form v-on:keyup.enter="onkeyEnter" v-on:submit.prevent="onsubmit()">
            <input type="text" name="" id="" value=""/>
            <input type="submit" value="提交"/>
        </form>
    </div>
    <script>
        var app = new Vue({
            el: '#app', // 指定 Vue 实例挂载的元素为 id 为 "app" 的 div
            data: {
                // 这里可以定义一些数据
            },
            methods: {
                onclick: function() {
                    console.log('clicked') // 点击按钮时在控制台输出 'clicked'
                },
                onMouseover: function() {
                    console.log('mouseover') // 鼠标经过按钮时在控制台输出 'ouseover'
                },
                onEnter: function() {
                    console.log('entered') // 鼠标进入按钮时在控制台输出 'entered'
                },
                onOut: function() {
                    console.log('outed') // 鼠标离开按钮时在控制台输出 'outed'
                },
                onsubmit: function() {
                    console.log('submitted') // 提交表单时在控制台输出 'submitted'
                },
                onkeyEnter: function() {
                    console.log('key entered') // 在表单中按下回车键时在控制台输出 'key entered'
                }
            }
        });
    </script>
</body>
</html>